<template>
    <div class="goods-layout">
        <!-- <input type="checkbox" class="check-box" :id="item.id" :value="item.name" v-model="checkedNames" > -->
        <div class="grid-content bor-radius-10 mg-bo-10 pos-relative card-row"

             @click="handler(index)"
        >
            <div style="position:absolute; z-index:1;left: 4px; top: 2px;">
                <el-checkbox @change="setGood" v-model="state"></el-checkbox>
            </div >
            <div class="card-01" style="position:relative; z-index:2; padding-top:1.8em">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="grid-content pd">
                            <img src="../../../../static/img/goods.png">
                        </div>
                    </el-col>
                    <el-col :span="16">
                        <div class="grid-content text">
                            <h6>{{ item.name }}</h6>
                            <p class="l2">{{ item.remark}}</p>
                            <span>原价：{{ item.price }}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <div class="vip-price">
                <small>会员价：</small>
                <span>{{ item.memberPrize }}</span>
            </div>
            <!-- <span>Checked names: {{ checkedNames }}</span> -->
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            item: '',
            index: '',
            number: ''
        },
        data: function () {

            return {
                classItem: [],
                checkedNames: [],
                state:false,
                a: this.index,
                b: this.number
            }
        },
        watch: {
            number(val) {
                this.b = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
                if (this.b != this.a) {
                    this.state = false;
                }
            }
        },
        methods: {
            handler: function (index) {
                this.state = !this.state;
                this.setGood();
            },
            setGood: function () {
                if(this.state){
                    this.$emit('transferGood', this.item)
                }else{
                    this.$emit('deleteGood', this.item)
                }
            }
        }
    }
</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;

    &
    :last-child {
        margin-bottom: 0;
    }

    }



</style>
